<template>
<div>
  <h3>{{name}}</h3>
</div>
</template>


<script>
export default {
  name:"MusicDetail",
  // mounted() {
  //   console.log(this.$route)
  // },
  computed:{
    name(){
      const {id} = this.$route.params
      switch (id){
        case "1":
          return"周杰伦"
        case "2":
          return"林俊杰"
        case "3":
          return"陈奕迅"
        default:
          return "xxxx"
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next);
    console.log("路由内进入时守卫");
    console.log(this); //undefined
    next(() => {
      console.log(this);
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log(to, from, next, "beforeRouteUpdate");
    console.log("组件内更新时");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to, from, next, "beforeRouteLeave");
    console.log("组件离开时");
    next();
  },
  //监视动态路由参数的更新
  watch: {
    $route(newVal) {
      console.log("动态路由更新参数", newVal);
    },
  },
};

</script>


<style></style>